@charset "utf-8";
/**
 * Created by younger on 2016/02/29.
 */

/*
 * 引用此模块要在父模块先引用common.scss；
 * /public/css/common.scss
 * 由于%box等通用占位选择器，父模块也使用到
 * 如果再次重现引用，会导致重复的编译
 */
//侧边栏
//==========================
$border: 1px solid darken($asideTitleBgColor, 10);
%aside-title {
  margin: 0;
  padding: 10px;
  border-radius: 3px;
  border: $border;
  border-bottom: none;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  background-image: linear-gradient($asideTitleBgColor -30%,
          lighten($asideTitleBgColor, 4), $asideTitleBgColor);
  font-size: $asideTitleFontSize;
  color: $titleColor;
}

%aside-box {
  box-sizing: border-box;
  padding: 10px;
  border: $border;
  background-color: $eachBoxColor;
}

%aside-pic-frame-small {
  @extend %pic-frame;
  padding: 5px;
}

%aside-pic-frame-smaller {
  @extend %pic-frame;
  padding: 2px;
}

//侧边栏
.aside {
  @extend %fl;
  width: 200px;
  margin-left: 20px;
}

//照片墙
.aside-photo-stream {
  @extend %mb;

  @at-root {
    //title
    .aps-title {
      @extend %aside-title;
    }

    //内容
    .aps-body {
      @extend %aside-box;

      img {
        @extend %aside-pic-frame-small;
        margin-left: 4.5px;
        margin-top: 5px;
      }
    }

    //更多
    .aps-btn {
      @extend %default-btn;

      margin: 5px 0 0 5px;
    }
  }
}

//联系方式
.aside-get-connected {
  @extend .aside-photo-stream;

  @at-root {
    .agc-title {
      @extend %aside-title;
    }

    .agc-body {
      @extend %aside-box;
      text-align: center;
      img {
        @extend %aside-pic-frame-smaller;

        @include col(2.4); //20%
      }
    }
  }
}

//最近的文章
.aside-latest-posts {
  @extend .aside-get-connected;

  @at-root {
    .alp-title {
      @extend %aside-title;
    }

    .alp-body {
      @extend %aside-box;

      dl {
        position: relative;
        padding-bottom: 10px;
        border-bottom: 1px dashed lighten(black, 80);
        transition: all .5s;

        &:last-child {
          border: none;
        }

        &:hover {
          will-change: padding;
          color: darken(adjust_hue($titleColor, 150), 2);
          margin-left: 5px;
        }
      }
      dt {
        position: absolute;
        height: 60%;
        right: 0;
        transform: translate(60%, 8%);

        @extend %aside-pic-frame-smaller;
      }
      dd {
        margin-left: 0;
        padding-right: 28px;
      }
      img {
        height: 100%;
      }
      a {
        height: 100%;
        font-size: 1.2em;
        color: $titleColor;
        font-weight: bold;
      }
      time {
        display: block;
        color: adjust_hue($titleColor, 30);
      }
    }
  }
}

//文章归档
.aside-archives {
  @extend .aside-get-connected;

  .aa-title {
    @extend %aside-title;
  }

  .aa-body {
    @extend %aside-box;

    li {
      line-height: 2.5em;
      border-bottom: 1px dashed lighten(black, 80);
      text-indent: 1em;
      transition: all 0.5s;
      &:last-child {
        border-bottom: none;
      }
      &:hover {
        text-indent: 1.5em;
      }

      a {
        font-size: 1.2em;
        color: $titleColor;
      }
    }
  }
}

//featured artwork
.aside-featured-artwork {
  @extend .aside-get-connected;
  @at-root {

    .afa-title {
      @extend %aside-title;
    }

    .afa-body {
      @extend %aside-box;

      img {
        box-sizing: border-box;
        @extend %aside-pic-frame-small;
        width: 100%;
      }
    }
  }
}

//search
.aside-search {
  @extend .aside-get-connected;
  @at-root {

    .as-title {
      @extend %aside-title;
    }

    .as-body {
      @extend %aside-box;
      font-size: 0;

      .as-input-text, .as-input-submit {
        font-size: $fontSize;
        padding: 5px 0;
      }

      .as-input-text {
        font-size: $fontSize;
        @include col(8.6);
        border: 1px solid lighten(black, 70);
        border-right: none;
        outline: none;
        text-indent: 0.5em;
      }

      .as-input-submit {
        @include col(3);
        border: 1px solid lighten(black, 70);
        outline: none;

        &:hover {
          background-color: lighten(black, 70);
          color: $titleColor;
        }
      }
    }
  }
}

//基本信息
.base-infor {
  @extend .aside-get-connected;
  @at-root {

    .base-infor-title {
      @extend %aside-title;
    }

    .base-infor-body {
      @extend %aside-box;

      li:last-child {
        margin-top: 20px;
      }
    }
  }
}

//侧边栏
.aside {
  @extend %fl;
  width: 200px;
  margin-left: 20px;
}